<template>
	<vCommonPage type="1" :typeChose="$route.query.typeChose" :title="$route.query.code == 'mzyy' ? '门诊预约':'门诊挂号'"
		:mzlx="$route.query.mzlx" class="mzyyXzysClass">
		<div slot="customContent" style="width: 100%;">
			<div class="typeChoseBox">
				<div class="leftBox" @click="clickOrdinaryBtn(true)">
					普通门诊
					<div v-if="clickOrdinary" class="leftBoxBottom"></div>
				</div>
				<div class="rhightBox" @click="clickOrdinaryBtn(false)">
					专家门诊
					<div v-if="!clickOrdinary" class="rhightBoxBottom"></div>
				</div>
			</div>
			<div class="choseItemBox" v-loading.fullscreen.lock="fullscreenLoading">
				<div :class="item.amount>0?'Item':'ItemEmpty'"
					v-for="(item,index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					@click="clickItem(index,item)" :key="'info1-'+index" v-if="">
					<div v-show="item.amount==0" :class="item.isClick? 'ItemText click':'ItemText'">
						<div class="topBox">
							<div :class="item.isClick?'nameDiv huiName':'nameDiv'"> {{item.doctorName}}</div>
							<!-- <div :class="item.isClick?'doctorTypeDiv huiName' : 'doctorTypeDiv'">{{item.title}}</div> -->
						</div>
						<div class="ItembottomBox">
							<div class="huiName">¥{{item.fee}}</div>
							<div v-if="item.amount>0" class="haveMuchDiv">余{{item.amount}}号</div>
							<div v-if="item.amount==0" class="haveMuchDiv huiName">已满</div>
						</div>
					</div>

					<div v-show="item.amount>0" :class="item.isClick? 'ItemText click':'ItemText'">
						<div class="topBox">
							<div :class="item.isClick?'nameDiv huiName':'nameDiv'">
								<!-- <div>{{item.regTypeId}}</div> -->
								<div>{{item.doctorName}}</div>
							</div>

							<div v-if="item.amount>0" class="haveMuchDiv">余{{item.amount}}号</div>
							<div v-if="item.amount==0" class="haveMuchDiv huiName">已满</div>
							<!-- <div :class="item.isClick?'doctorTypeDiv huiName' : 'doctorTypeDiv'">{{item.title}}</div> -->
						</div>
						<div class="ItembottomBox">
							<div class="moneyDiv">¥{{item.fee}}</div>
						</div>
					</div>
				</div>
			</div>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<!-- 			<div v-if="tipText" class="tipBox center">
				<div class="tipText">该医生此时间段已经<span class="hui">约满</span>,请选择其他时间段！</div>
			</div> -->
			<div v-if="tipText" class="yiny" @click="closeYinying()"></div>
			<div class="bottomBox" style="justify-content: space-between;">
				<div style="display: flex;">
				<el-button type="primary" class="BtnTextHome" @click="goBack()" v-if="!$store.state.zndz.ksInfo.deptId">
					返回</el-button>
				<el-button type="primary"
					:class="$store.state.zndz.ksInfo.deptId?'BtnTextHome hasRightDept':'BtnTextHome'"
					@click="goBackHome()">首页</el-button>
					
				</div>
				<div style="display: flex;align-items: center;">
				<el-button type="primary" v-show="totalPage>1"
					:class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'" @click="prePage()">
					上一页
				</el-button>
				<div class="pageBox" v-show="totalPage>1">
					<div class="curentPage">{{currentPage}}</div>
					/
					<div class="totalPage">{{totalPage}}</div>
				</div>
				<el-button type="primary" v-show="totalPage>1"
					:class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'" @click="nextPage()">
					下一页
				</el-button>
				</div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		registerSource,
		getDoctorsIn7Days
	} from "@api/apiBox/mzyyAndMzgh"
	import {
		getMonday,
		getDate,
		getLastDadyDay,
		changeChineToDate,
		checkFreeDayByDateStr,
		fun_date
	} from "../../assets/js/getTime.js"
	export default {
		name: "mzgh",
		data() {
			return {
				//是否点击普通门诊
				clickOrdinary: true,
				dataList: [],
				fullscreenLoading: false,
				gengerList: [], //普通门诊数组
				specialList: [], //专家门诊数组
				currentPage: 1, //初始页
				pagesize: 9, //    每页的数据
				totalPage: 0,
				tipText: '',
				timeOut: ''
			};
		},
		methods: {
			ReckonTime() {},
			//点击门诊部门
			clickItem(index, item) {
				if (item.amount == 0) {
					this.tipText = "该医生号已经约满，请选择其他医生！";
					this.timeOut = setTimeout(() => {
						this.tipText = "";
						clearTimeout(this.timeOut);
					}, 2000)
				} else {
					this.clearClick();
					this.dataList[index].isClick = true;
					// item['doctorTypeName'] =  this.clickOrdinary ? '普通号' : '专家号' ;
					//将医生数据存入缓存
					item.regFee = item.fee;
					this.$store.dispatch("appointment/updateDoctor", item); // 医生信息
					console.log(this.$store.state, '缓存')
					this.openFullScreen();
				}
			},
			closeYinying() {
				this.tipText = "";
				clearTimeout(this.timeOut);
			},
			clearClick() {
				let list = this.dataList;
				for (let item of list) {
					item.isClick = false;
				}
				this.dataList = list;
			},
			//点击普通门诊或者特殊门诊按钮
			clickOrdinaryBtn(res) {
				//普通门诊
				if (res) {
					this.clickOrdinary = true;
					this.dataList = this.gengerList;
				}
				//专家门诊
				else {
					this.clickOrdinary = false;
					this.dataList = this.specialList;
				}
				//页码数初始化
				this.initPage();
			},
			//页码数初始化
			initPage() {
				this.totalPage = parseInt((this.dataList.length + this.pagesize - 1) / this.pagesize)
				this.currentPage = 1;
			},
			//前往选择时间页面
			openFullScreen() {
				let mzlx = this.$route.query.mzlx;
				if (mzlx == 4) {
					this.$router.push({
						name: "mzyyXzsj",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '3'
						},
					})
				}
				if (mzlx == 3) {
					this.$router.push({
						name: "mzyyXzrq",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '2'
						},
					})
				}

				if (mzlx == 0) {
					this.$router.push({
						name: "mzyyXzsj",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '2'
						},
					})
				}


			},
			//给数组添加点击属性
			addCLick(list) {
				for (let i of list) {
					i['isClick'] = false;
				}
				return list;
			},
			//请求医生数据
			async initData() {
				let doctorId = "";
				if (this.$store.state.yyjj.doctorId) {
					doctorId = this.$store.state.yyjj.doctorId;
				}
				console.log(this.$store.state)
				//请求普通医生数据
				let gengeralData = {
					data: {
						beginDate: changeChineToDate(new Date(), 'YYYY-MM-DD'), //格式 yyyy-MM-dd
						// endDate:this.$store.state.appointment.date, //格式 yyyy-MM-dd
						deptId: this.$store.state.appointment.department.deptId //科室ID
					},
					that: this
				}
				let generalRes = {};
				if(this.$route.query.code == 'mzyy'){
					generalRes = await getDoctorsIn7Days(gengeralData);
				}
				if(this.$route.query.code == 'mzgh'){
					generalRes = await registerSource(gengeralData);
				}
				let generalDoctorList = [];
				let specailDoctorList = [];
				for (let item of generalRes.data) {
					if (item.doctorLevel == '副主任医师' || item.doctorLevel == '主任医师') {
						specailDoctorList.push(item)

					}
				}
				for (let item of generalRes.data) {
					if (item.doctorLevel == '医师' || item.doctorLevel == '主治医师') {
						generalDoctorList.push(item)
					}
				}

				generalDoctorList = this.addCLick(generalDoctorList);
				specailDoctorList = this.addCLick(specailDoctorList);
				this.gengerList = generalDoctorList;
				this.specialList = specailDoctorList;
				this.dataList = this.gengerList;
				//页码数初始化
				this.initPage();
			},
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			},
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzghYy/xzys.scss";
</style>

<style>
	@media (min-height: 0px) and (max-height: 1910px) {
		.mzyyXzysClass .el-main {
			display: flex !important;
			position: relative;
			height: calc(100% - 22.625rem);
		}

		.mzyyXzysClass .el-row-vertical {
			align-items: flex-start;

		}
	}
	
	@media (min-height: 1920px)  {
		.mzyyXzysClass .el-main {
			display: flex !important;
			position: relative;
			height: calc(100% - 28.625rem);
		}
	
		.mzyyXzysClass .el-row-vertical {
			align-items: flex-start;
	
		}
	}
</style>
